html {
  /* 顶栏深色渐变背景色 */
  .gradient_dark_header1 {
    background: linear-gradient(to right, #7b4391, #dc2430 40%);
  }

  /* 顶栏深色渐变背景色 */
  .gradient_dark_header2 {
    background: linear-gradient(to bottom, #b6cd85, #8aa651);
  }

  /* 顶栏浅色渐变背景色 */
  .gradient_light_header1 {
    background: linear-gradient(45deg, #fcedbe, #fefefe, #fcedbe);
  }

  /* 顶栏深色背景图 */
  .bg_dark_header1 {
    background-image: url('@/assets/header_dark_bg1.gif');
    background-position: center bottom;
    background-size: cover;
  }

  /* 顶栏浅色背景图 */
  .bg_light_header1 {
    background-image: url('@/assets/header_light_bg1.gif');
    background-position: center bottom;
    background-size: cover;
  }

  &.light {
    body {
      /* 顶栏白背景时样式控制 */
      &[data-header-theme*='light'] {
        .vk-layout-header {
          --el-button-hover-bg-color: rgba(0, 0, 0, 0.05); /* 顶栏、侧边栏按钮鼠标经过背景色 */
          --el-button-text-color: var(--el-text-color-primary); /* 顶栏、侧边栏按钮文本色 */
          --el-button-hover-text-color: var(--el-text-color-primary); /* 顶栏、侧边栏按钮鼠标经过文本色 */
          --el-breadcrumb-text-color: var(--el-text-color-secondary); /* 面包屑文本色 */
          --el-breadcrumb-link-color: var(--el-text-color-primary); /* 面包屑链接文本色 */
          --el-breadcrumb-link-hover-color: var(--el-color-primary); /* 面包屑链接鼠标经过文本色 */
          --el-breadcrumb-separator-color: var(--el-text-color-placeholder); /* 面包屑分隔符文本色 */

          /* 主菜单变量控制 */
          .vk-header-center {
            &.is-default {
              .el-menu {
                --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
                --el-menu-hover-text-color: var(--el-color-primary); /* 无子级菜单的hover文本色 */
                --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */
                --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
                --el-submenu-hover-text-color: var(--el-color-primary); /* 有子级菜单的hover文本色 */
                --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
                --el-menu-bg-color: transparent; /* 默认菜单背景色 */
                --el-menu-hover-bg-color: rgba(0, 0, 0, 0.05); /* 无子级菜单hover背景色 */
                --el-menu-active-color: rgba(0, 0, 0, 0.05); /* 无子级菜单active背景色 */
                --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
                --el-submenu-active-bg-color: rgba(0, 0, 0, 0.05); /* 有子级active背景色 */
              }
            }

            &.is-card {
              .el-menu {
                --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
                --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
                --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
                --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
                --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
                --el-submenu-active-text-color: var(--el-color-white); /* 有子级菜单的active文本色 */
                --el-menu-bg-color: transparent; /* 默认菜单背景色 */
                --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
                --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
                --el-submenu-hover-bg-color: var(--el-color-primary); /* 有子级hover背景色 */
                --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
              }
            }

            &.is-smart {
              --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */

              .el-menu {
                --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
                --el-menu-hover-text-color: var(--el-color-primary); /* 无子级菜单的hover文本色 */
                --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */
                --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
                --el-submenu-hover-text-color: var(--el-color-primary); /* 有子级菜单的hover文本色 */
                --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
                --el-menu-bg-color: transparent; /* 默认菜单背景色 */
                --el-menu-hover-bg-color: transparent; /* 无子级菜单hover背景色 */
                --el-menu-active-color: transparent; /* 无子级菜单active背景色 */
                --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
                --el-submenu-active-bg-color: transparent; /* 有子级active背景色 */
              }
            }
          }
        }

        /* 折叠时，次级菜单变量控制 */
        .el-popper {
          .el-menu--horizontal {
            .el-menu {
              --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-text-color-primary); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: transparent; /* 默认菜单背景色 */
              --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
              --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
              --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
            }
          }
        }
      }

      /* 顶栏非白背景时样式控制 */
      &:not([data-header-theme*='light']) {
        .vk-layout-header {
          --el-button-hover-bg-color: rgba(255, 255, 255, 0.1); /* 顶栏、侧边栏按钮鼠标经过背景色 */
          --el-button-text-color: rgba(255, 255, 255, 0.9); /* 顶栏、侧边栏按钮文本色 */
          --el-button-hover-text-color: rgba(255, 255, 255, 0.9); /* 顶栏、侧边栏按钮鼠标经过文本色 */
          --el-breadcrumb-text-color: rgba(255, 255, 255, 0.6); /* 面包屑文本色 */
          --el-breadcrumb-link-color: rgba(255, 255, 255, 0.8); /* 面包屑链接文本色 */
          --el-breadcrumb-link-hover-color: var(--el-color-white); /* 面包屑链接鼠标经过文本色 */
          --el-breadcrumb-separator-color: rgba(255, 255, 255, 0.6); /* 面包屑分隔符文本色 */

          /* 主菜单变量控制 */
          .vk-header-center {
            &.is-default {
              .el-menu {
                --el-menu-text-color: rgba(255, 255, 255, 0.8); /* 无子级菜单的默认文本色 */
                --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
                --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
                --el-submenu-text-color: rgba(255, 255, 255, 0.8); /* 有子级菜单的默认文本色 */
                --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
                --el-submenu-active-text-color: var(--el-color-white); /* 有子级菜单的active文本色 */
                --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
                --el-menu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 无子级菜单hover背景色 */
                --el-menu-active-color: rgba(255, 255, 255, 0.2); /* 无子级菜单active背景色 */
                --el-submenu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 有子级hover背景色 */
                --el-submenu-active-bg-color: rgba(255, 255, 255, 0.2); /* 有子级active背景色 */
              }
            }

            &.is-card {
              .el-menu {
                --el-menu-text-color: rgba(255, 255, 255, 0.8); /* 无子级菜单的默认文本色 */
                --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
                --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
                --el-submenu-text-color: rgba(255, 255, 255, 0.8); /* 有子级菜单的默认文本色 */
                --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
                --el-submenu-active-text-color: var(--el-color-white); /* 有子级菜单的active文本色 */
                --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
                --el-menu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 无子级菜单hover背景色 */
                --el-menu-active-color: rgba(255, 255, 255, 0.2); /* 无子级菜单active背景色 */
                --el-submenu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 有子级hover背景色 */
                --el-submenu-active-bg-color: rgba(255, 255, 255, 0.2); /* 有子级active背景色 */
              }
            }

            &.is-smart {
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */

              .el-menu {
                --el-menu-text-color: rgba(255, 255, 255, 0.8); /* 无子级菜单的默认文本色 */
                --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
                --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
                --el-submenu-text-color: rgba(255, 255, 255, 0.8); /* 有子级菜单的默认文本色 */
                --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
                --el-submenu-active-text-color: var(--el-color-white); /* 有子级菜单的active文本色 */
                --el-menu-bg-color: transparent; /* 默认菜单背景色 */
                --el-menu-hover-bg-color: transparent; /* 无子级菜单hover背景色 */
                --el-menu-active-color: transparent; /* 无子级菜单active背景色 */
                --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
                --el-submenu-active-bg-color: transparent; /* 有子级active背景色 */
              }
            }
          }

          /* 分栏、综合、常规模式下标签栏的折叠按钮颜色 */
          .vk-tag-panel {
            --el-button-text-color: var(--el-text-color-regular); /* 顶栏、侧边栏按钮文本色 */
            --el-button-hover-text-color: var(--el-text-color-regular); /* 顶栏、侧边栏按钮鼠标经过文本色 */
          }
        }

        /* 折叠时，次级菜单变量控制 */
        .el-popper {
          .el-menu--horizontal {
            .el-menu {
              --el-menu-text-color: rgba(255, 255, 255, 0.65); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: rgba(255, 255, 255, 0.65); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: #0d1014; /* 默认菜单背景色 */
              --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
              --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
              --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
            }
          }
        }
      }
    }
  }

  &.dark {
    body {
      .vk-layout-header {
        --el-button-hover-bg-color: rgba(255, 255, 255, 0.1); /* 顶栏、侧边栏按钮鼠标经过背景色 */
        --el-button-text-color: var(--el-text-color-primary); /* 顶栏、侧边栏按钮文本色 */
        --el-button-hover-text-color: var(--el-text-color-primary); /* 顶栏、侧边栏按钮鼠标经过文本色 */
        --el-breadcrumb-text-color: var(--el-text-color-secondary); /* 面包屑文本色 */
        --el-breadcrumb-link-color: var(--el-text-color-primary); /* 面包屑链接文本色 */
        --el-breadcrumb-link-hover-color: var(--el-color-primary); /* 面包屑链接鼠标经过文本色 */
        --el-breadcrumb-separator-color: var(--el-text-color-disabled); /* 面包屑分隔符文本色 */

        /* 主菜单变量控制 */
        .vk-header-center {
          &.is-default {
            .el-menu {
              --el-menu-text-color: rgba(255, 255, 255, 0.8); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: rgba(255, 255, 255, 0.8); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-white); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
              --el-menu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 无子级菜单hover背景色 */
              --el-menu-active-color: rgba(255, 255, 255, 0.1); /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 有子级hover背景色 */
              --el-submenu-active-bg-color: rgba(255, 255, 255, 0.1); /* 有子级active背景色 */
            }
          }

          &.is-card {
            .el-menu {
              --el-menu-text-color: rgba(255, 255, 255, 0.8); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: rgba(255, 255, 255, 0.8); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-white); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
              --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
              --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: var(--el-color-primary); /* 有子级hover背景色 */
              --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
            }
          }

          &.is-smart {
            --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */

            .el-menu {
              --el-menu-text-color: rgba(255, 255, 255, 0.8); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-primary); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: rgba(255, 255, 255, 0.8); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-color-primary); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: transparent; /* 默认菜单背景色 */
              --el-menu-hover-bg-color: transparent; /* 无子级菜单hover背景色 */
              --el-menu-active-color: transparent; /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
              --el-submenu-active-bg-color: transparent; /* 有子级active背景色 */
            }
          }
        }
      }

      /* 折叠时，次级菜单变量控制 */
      .el-popper {
        .el-menu--horizontal {
          .el-menu {
            --el-menu-text-color: rgba(255, 255, 255, 0.65); /* 无子级菜单的默认文本色 */
            --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
            --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
            --el-submenu-text-color: rgba(255, 255, 255, 0.65); /* 有子级菜单的默认文本色 */
            --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
            --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
            --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
            --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
            --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
            --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
            --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
          }
        }
      }
    }
  }
}
